<script setup>
  import { reactive, ref, watch } from "vue";
  const count = ref(0);
  const user = reactive({
    name: "tom",
    info: {
      gender: "男",
      age: 18,
    },
  });
  
  // 2. 监听多个响应式数据
  // watch([数据1, 数据2, ...], 改变后回调函数)
  // watch([count, user], () => {
  //   console.log("数据改变了");
  // });
  watch(() => user.info.age, () => {
    console.log("111年龄改变了");
  });
  watch(() => user.name, () => {
    console.log("222姓名改变了");
  });
  watch(() => user.info.gender, () => {
    console.log("333性别改变了");
  });
  watch(() => user.info, () => {
    console.log("对象改变了");
  },{deep:true});
  
  // 2s改变数据
  // setTimeout(() => {
  //   count.value++;
  // }, 2000);
  
  // 4s改变数据
  // setTimeout(() => {
  //   user.info.age++;
  // }, 4000);
</script>

<template>
  <button @click="user.name='诶嘿'">姓名</button>
  <button @click="user.info.gender='女'">性别</button>
  <button @click="user.info.age++">年龄</button>
  <!-- <p>计数器：{{ count }}</p> -->
  <p>
    姓名：{{ user.name }} 性别：{{ user.info.gender }} 年龄：{{ user.info.age }}
  </p>
</template>